<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>闲言轻博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap">
    <div class="container">
        <div class="contar-wrap" id="article_vue">
            <h4 class="item-title">
                <p><i class="layui-icon layui-icon-speaker"></i>公告：<span>欢迎来到我的微课</span></p>
            </h4>

            <div class="item" v-for="article in articles">
                <div class="item-box  layer-photos-demo1 layer-photos-demo">
                    <h3><a :href="'/teacher/article/details.html?id='+article.id">{{article.title}}</a></h3>
                    <h5>发布于：<span>{{article.releaseTime}}</span></h5>
                    <p v-html="article.content"></p>
                </div>
                <div class="comment count">
                    <a :href="`/teacher/article/details.html?id=${article.id}`">详情</a>
                    <a href="javascript:;" :id="article.id" :class="{like:true,'layblog-this':article.zan}">点赞</a>
                    <!--<a href="javascript:;" class="like" v-on:load="setZan(article.articleId, $event)">点赞</a>-->
                </div>
            </div>
        </div>

        <div id="article_items"></div>
    </div>
</div>

<div th:include="/teacher/templates::footer"></div>
<script src="/vue/vue.js"></script>
<script>
    const getArticlesApi = api.getArticles;
    const getArticleZanStateApi = api.getArticleZanState;
    articleVue = new Vue({
        el: '#article_vue',
        data: {
            articles: [{
                id: 1,
                title: '',
                content: ''
            }],
            totalCount: 0,  //请求后的值
            pageNumber: 0,  // 使用ajax异步刷新，页面初始值为1
            pageSize: 2
        },
        methods: {
            async init (laypage) {
                this.pageNumber = 0;
                this.pageSize = 2;
                var res = await getArticlesApi({
                    page: this.pageNumber,
                    size: this.pageSize
                });
                this.articles = res.content;
                this.totalCount = res.totalElements;
                laypage.render({
                    elem: 'article_items', //注意，这里的 test1 是 ID，不用加 # 号
                    count: this.totalCount, //数据总数，从服务端得到
                    limit: this.pageSize,
                    theme: '#1e9fff',
                    jump:function (obj, first) {
                        if(!first){
                            // obj需要跳转的页面参数
                            articleVue.jump(obj.curr);
                        }
                    }
                });
                this.getZanState()
            },
            async getZanState(){
                // 一个文章发一次请求
                for(var i=0;i<this.articles.length; i++){
                    const res = await getArticleZanStateApi(this.articles[i].id);
                    this.articles[i].zan = res.data.zan=='0'?false:true;
                    console.log(res.data.zan)
                }

            },
            async jump (page) {
                var res = await getArticlesApi({
                    page: page-1,  //从0开始
                    size: this.pageSize
                });
                this.articles = res.content;
                this.totalCount = res.totalElements;
            },
        }
    });

    layui.config({
        base: '/js/'
    }).use('index', function () {
        articleVue.init(layui.laypage)
    });


</script>
</body>
</html>